<template>
	<el-container style="padding: 0;background-color: #fff;border-radius: 7px;">
	<el-header class="todolistTop" style="background: none;">
		<div class="todolistTop-head">

<div class="warntitleTopImg"></div>
<span class="todotitle">预警中心</span>

</div>

</el-header>
<el-main class="nopadding todolist" style="overflow: hidden;border-radius: 7px;">
			<el-row v-for="(quickCenterMenu, num) in currquickTask" :md="24" :lg="24" :class="'Quick-Row'+num"
			:style="'height:'+topcontentrowheight+'px;'">
				<el-col :lg="8" v-for="(item, index) in quickCenterMenu" @click="quickCenterHandler(item)" :class="'Quick-RowCol'+index">
					<div class="Quick-itmeRow" :style="'margin-top:'+((topcontentrowheight-70)/2)+'px;'">
						<div v-bind:key="index"
						class="Quick-itme quickCenterCol">
							<div :class="'clocount clocount'+num+index" >{{ item.count }}</div>
						</div>
						<div class="colimglable">{{ item.name }}</div>
					</div>
				</el-col>

			</el-row>

		</el-main>

	</el-container>
</template>

<script>
import ExTable from "@/components/exTable/index.vue";
import ExSearch from "@/components/exSearch/index.vue";
import ExSearchTree from "@/components/exSearchTree/index.vue";
import http from "@/utils/request";
import globalparam from "@/constant/model/globalparam";
import tool from "@/utils/tool";
import moment from "moment";

export default {
	name: '审批中心',
	components: {
		ExSearchTree,
		ExSearch,
		ExTable,
	},
	props:{
		isIndexWidgets: {type:Boolean,default:false},
		height: {type:Number,default:250}
	},
	data() {
		return {
			statistics:{},
			pendingStatus:'0',
			relObjectStatus:null,
			parentLevelCode: null,
			isAlready:false,
			fixParams:{},
			loginUser: this.$TOOL.current.user(),
			tableHeight:100,//表格高度
			penglist:[],
			pageForm: {
				current: 1,
				pageSize: 10,
			},
			currquickTask:[
				[
					{name:"超时单据",count:0,code:"csdj"},
					{name:"异常单据",count:0,code:"ycdj"},
					{name:"维保到期",count:0,code:"wbdq"},
				]
				,
				[
					{name:"报废到期",count:0,code:"bfdq"},
					//{name:"人员变动",count:0,code:"csdj"},
					//{name:"机构变动",count:0,code:"ycdj"},
				]
			],
			topcontentrowheight:100,
			topcontentrowtop:5,
			topcontentrow:2,

			//管理部门范围
			manageDeptIds:tool.current.manageDeptIds(),
			//单据统计范围
			documentSummaryStatistics: '',
			//单据未完成时状态范围
			statusList: [],
			documentConfigIds: [],
			excludeDocumentStatus:['nopass','executed','cancel'],
			loginUsers: this.$TOOL.current.user(),

			documentIds: [],

			assetStatisticsRange: '',
			assetCategoryIds: this.$TOOL.current.manageAssetCategoryIds(),
			deptIds:this.$TOOL.current.manageDeptIds(),
			warrantyMoth: moment(new Date()).format("YYYY-MM"),
			storeParams: {},


			scrapMonth: moment(new Date()).format("YYYY-MM"),
			isContainOldScrap: false,
			manageCategoryIds: this.$TOOL.current.manageAssetCategoryIds(),
		}
	},
	created() {


	},
	async mounted() {
		this.loadcsData();
		this.loadycData();

		this.assetStatisticsRange = await this.$cache.data.loadGlobalParam(globalparam.assetStatisticsRange.paramCode);
		this.loadWBData();
		this.loadBFData();

		window.addEventListener('resize', this.getHeight1);
		this.getHeight1();
	},
	methods: {
		getHeight1(){//计算图表和快捷中心2大板块区域高度
			/*
			var clientWidth = window.innerWidth;
			var screenHeight=window.innerHeight;
			let topheight=100;
			if(window.innerWidth>1690 && window.innerWidth<1990){
				topheight=150;
			}
			let margintop=16;
			if(window.innerWidth>1690 && window.innerWidth<1990){
				margintop=40;
			}
			let contH=(screenHeight-70-42-16-16-topheight-margintop);


			this.topcontentheight=contH;//板块高度
			this.listHeight=(contH/2)-30;//list高度
			this.topcontentrowheight=((this.listHeight)/this.topcontentrow);

			this.topcontentrowtop=(this.topcontentrowheight-62)/2;
			*/
			var screenHeight = document.documentElement.clientHeight;
			var clientWidth = document.documentElement.clientWidth;
			let contH=(screenHeight-304-60)/2;
			if(clientWidth<1600){
				contH=(screenHeight-236)/2;
			}
			this.tableHeight=contH-100;
			//if(window.innerWidth>1690 && window.innerWidth<1990){
			//	this.topcontentrowheight=130;
			//}
			//if(window.innerWidth<1690){
			//	this.topcontentrowheight=100;
//}
		this.topcontentrowheight=(this.height-55)/2;

		},

		loadcsData() {
			let queryParams = {};
			this.loading = true;
			this.fomateQueryParams_cs(queryParams, this);
			this.$API.asset.document.selectCountByQuery.post(queryParams).then((rsp =>{
				if(rsp.code === 2000){
					//this.item.Count = rsp.data;
					this.currquickTask[0][0].count = rsp.data;
				}
				this.loading = false;
			}))
		},
		loadycData() {
			let queryParams = {};
			this.loading = true;
			this.fomateQueryParams_yc(queryParams, this);
			this.$API.asset.document.selectCountByQuery.post(queryParams).then((rsp =>{
				if(rsp.code === 2000){
					this.currquickTask[0][1].count = rsp.data;
				}
				this.loading = false;
			}))
		},
		async loadWBData() {
			let queryParams = {};
			this.loading = true;
			this.fomateQueryParams_WB(queryParams, this);
			this.$API.asset.asset.assetCountDataByQuery.post(queryParams).then((rsp =>{
				if(rsp.code === 2000){
					this.currquickTask[0][2].count = rsp.data;
				}
				this.loading = false;
			}))


		},
		fomateQueryParams_WB(queryParams,_this) {
			//queryParams.isEarlyWarning = true;

			queryParams.warrantyMoth = _this.warrantyMoth;
			queryParams.isContainOldMaintenance = false;
			queryParams.deptIds = _this.manageDeptIds;
			queryParams.assetStatisticsRange = _this.assetStatisticsRange;
			queryParams.assetCategoryIds = _this.assetCategoryIds;
			queryParams.excludeStatus=['delete','scrap'];
			queryParams.pathCode="";
			queryParams.current=1;
			queryParams.pageSize=10;
			//queryParams.homewb="1";
		},
		loadBFData() {
			let queryParams = {};
			this.loading = true;
			this.fomateQueryParams_bf(queryParams, this);
			this.$API.asset.asset.assetCountDataByQuery.post(queryParams).then((rsp =>{
				if(rsp.code === 2000){
					this.currquickTask[1][0].count = rsp.data;
				}
				this.loading = false;
			}))

			/*
			{"assetStatusIds":[],"assetCategoryIds":[],
			"usingDepartmentIds":[],"dutyDepartmentIds":[],
			"storePlaceIds":[],"current":1,
			"pageSize":30,"userLevelCode":"0000001",
			"loginUserId":"1807ECA5-CD71-4A8E-9F82-6C41616C1CCF",
			"loginUserDeptLevelCode":"0043580",
			"loginUserDeptId":"988D7EF4-4680-4B1D-819C-328F96C591C8",
			"roleLevelCode":"0000001","roleId":"A0F62F77-EAA7-400C-B415-7920EC6338BF"}
			*/
		},
		fomateQueryParams_bf(queryParams,_this) {
			queryParams.scrapMonth = _this.scrapMonth;
			queryParams.deptIds = _this.manageDeptIds;
			queryParams.isContainOldScrap = false;
			queryParams.assetStatisticsRange = _this.assetStatisticsRange;
			queryParams.assetCategoryIds = _this.assetCategoryIds;
			queryParams.excludeStatus=['delete','scrap'];
			queryParams.pathCode="";

		},

		fomateQueryParams_cs(queryParams,_this) {
			queryParams.excludeDocumentStatus = _this.excludeDocumentStatus;
			queryParams.isOverTime = "1";
			queryParams.createUser = this.loginUsers.id;
		},
		fomateQueryParams_yc(queryParams,_this) {
			queryParams.isAbnormal = "1";
			queryParams.createUser = _this.loginUser.id;
			queryParams.statusList = ['review','prepared','hangup']
		},
		fomateQueryParams(queryParams,_this) {
			queryParams.documentSummaryStatistics = _this.documentSummaryStatistics;
			queryParams.manageDeptIds = _this.manageDeptIds;
			queryParams.statusList = _this.statusList;
			queryParams.queryDocumentConfigIds = _this.documentConfigIds;
		},
		getmydate(){
			let currdate=new Date();
			let year= currdate.getFullYear();
			let mm=currdate.getMonth()+1;
			let dd=currdate.getDay();
			let zd= year.toString();
			if(mm<10){
				zd=zd+"0"+mm.toString();
			}else{
				zd=zd+mm.toString();
			}
			if(dd<10){
				zd=zd+"0"+dd.toString();
			}else{
				zd=zd+dd.toString();
			}
			return zd;
		},
		quickCenterHandler(item){
			if(item.code=="wbdq"){
				let queryParams = {};
				queryParams.isEarlyWarning = true;
				this.fomateQueryParams_WB(queryParams, this);
				let title = "维保到期";
				//跳转到搜索台账页面
				let fromRouteId = this.$TOOL.crypto.MD5(this.$route.path);//当前页面的路由地址
				let key = this.$TOOL.crypto.MD5(title);//可以做为key的关键字段或内容
				let routeParams = {
						id: key,
						title: title,
						fixedParams:{
							deptIds:queryParams.deptIds,
							statusList:queryParams.statusList,
							isContainOldMaintenance: queryParams.isContainOldMaintenance,
						},//固定搜索参数，打开页面后，用户通过搜索界面的清空按钮无法清除
						searchParams: queryParams
					};
				this.$store.dispatch("addRouteParams", routeParams);
				this.$router.push({
					name: "maintenancelist",
					params: {fromRouteId: fromRouteId, key: key}
				});

			}else if(item.code=="bfdq"){
				let queryParams = {};
				this.fomateQueryParams_bf(queryParams, this);
				let title = "报废到期";
				//跳转到搜索台账页面
				let fromRouteId = this.$TOOL.crypto.MD5(this.$route.path);//当前页面的路由地址
				let key = this.$TOOL.crypto.MD5(title);//可以做为key的关键字段或内容
				let routeParams = {
						id: key,
						title: title,
						fixedParams:{
							deptIds:queryParams.deptIds,
							statusList:queryParams.statusList,
							isContainOldScrap:queryParams.isContainOldScrap,
						},//固定搜索参数，打开页面后，用户通过搜索界面的清空按钮无法清除
						searchParams: queryParams
					};
				this.$store.dispatch("addRouteParams", routeParams);
				this.$router.push({
					name: "scrapDuelist",
					params: {fromRouteId: fromRouteId, key: key}
				});

			}else if(item.code=="csdj"){
				let queryParams = {};
				this.fomateQueryParams_cs(queryParams, this);
				queryParams.createUser = this.loginUsers.id;
				let title = "超时单据";
				//跳转到搜索台账页面
				let fromRouteId = this.$TOOL.crypto.MD5(this.$route.path);//当前页面的路由地址
				let key = this.$TOOL.crypto.MD5(title);//可以做为key的关键字段或内容
				/**
				 *  1 = 根据管理部门，根据登录账户管理范围，资产的管理部门在账户管理范围内的显示<br>
				 *  2 = 根据使用部门，根据登录账户管理范围，资产的使用部门在账户管理范围内的显示<br>
				 *  3 = 根据管理部门或使用部门，根据登录账户管理范围，资产的使用部门或管理部门在账户管理范围内的显示<br>
				 *  其它 = 根据管理部门，按台账，根据使用部门或管理部门或借用部门在管理范围内的
				 */
					//设置搜索参数
				let routeParams = {
						id: key,
						title: title,
						fixedParams:{
							documentIds:queryParams.documentIds,
							createUser:queryParams.createUser,
							statusList:queryParams.statusList
						},//固定搜索参数，打开页面后，用户通过搜索界面的清空按钮无法清除
						searchParams: queryParams
					};
				this.$store.dispatch("addRouteParams", routeParams);
				this.$router.push({
					name: "toDocumentList",
					params: {fromRouteId: fromRouteId, key: key}
				});
			}else if(item.code=="ycdj"){
				let queryParams = {};
				this.fomateQueryParams_yc(queryParams, this);

				let title = "异常单据";
				//跳转到搜索台账页面
				let fromRouteId = this.$TOOL.crypto.MD5(this.$route.path);//当前页面的路由地址
				let key = this.$TOOL.crypto.MD5(title);//可以做为key的关键字段或内容
				/**
				 *  1 = 根据管理部门，根据登录账户管理范围，资产的管理部门在账户管理范围内的显示<br>
				 *  2 = 根据使用部门，根据登录账户管理范围，资产的使用部门在账户管理范围内的显示<br>
				 *  3 = 根据管理部门或使用部门，根据登录账户管理范围，资产的使用部门或管理部门在账户管理范围内的显示<br>
				 *  其它 = 根据管理部门，按台账，根据使用部门或管理部门或借用部门在管理范围内的
				 */
					//设置搜索参数
				let routeParams = {
						id: key,
						title: title,
						queryType: 'yc',
						fixedParams:{
							manageDeptIds:queryParams.manageDeptIds,
							statusList:queryParams.statusList
						},//固定搜索参数，打开页面后，用户通过搜索界面的清空按钮无法清除
						searchParams: queryParams
					};
				this.$store.dispatch("addRouteParams", routeParams);
				this.$router.push({
					name: "toDocumentList",
					params: {fromRouteId: fromRouteId, key: key}
				});
			}
		},

	}
}
</script>

<style scoped>
.todolistTop-head{
	width: 100%;
	display: flex;
	align-items: center;
	position: relative;
}
.todolistTop-headRightBox{
	right: 14px;cursor: pointer;display:flex;
	padding-right: 5px;
	padding-top: 6px;
	padding-bottom: 5px;
	border: 1px solid #fff;
	float: left;
	margin-top: -4px;
	width: 100px;
}
.todolistTop-headRightBox:hover{

	border: 1px solid #427CFF;
}
.itemActive{
	width: 36px;
  height: 16px;
  overflow-wrap: break-word;
  color: #333333;
  font-size: 14px;
  font-family: 'Microsoft YaHei', '微软雅黑', sans-serif;
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
  line-height: 30px;
  cursor: pointer;
  font-weight: 500;
}
.itemActiveLine{
	background-image: linear-gradient(
    -88deg,
    rgba(0, 160, 254, 1) 0,
    rgba(0, 160, 254, 1) 0,
    rgba(1, 80, 223, 1) 100%,
    rgba(1, 80, 223, 1) 100%
  );
  border-radius: 2px;
  width: 32px;
  height: 4px;
  margin:  auto;
}

.itemActiveMore:hover{
    margin-left: 91%;
	background-color: rgba(106, 131, 252, .7) !important;
	color: #fff !important;
	float: right;
}
.itemUnActive{
	width: 36px;
  height: 16px;
  overflow-wrap: break-word;
  color: #666666;
  font-size: 14px;
  font-family: 'Microsoft YaHei', '微软雅黑', sans-serif;
  text-align: left;
  white-space: nowrap;
  line-height: 30px;
  cursor: pointer;
  font-weight: 500;

}
.sytable{
	height: 86% !important;
}
.sytable .el-table{
	margin-bottom: 0px;
	height: 110% !important;
}

.todotitle{
	width: 77px;
    height: 18px;
    overflow-wrap: break-word;
    color: rgba(51, 51, 51, 1);
    font-size: 14px;
    font-family: PingFangSC-Semibold;
    text-align: left;
    white-space: nowrap;
    margin: 0px 0 0 12px;
    font-weight: 500;
}
.todolistTop{
  height: 40px;
justify-content:left;
padding-top:20px;
}
.warntitleTopImg{
	width: 20px;
  height: 20px;
  background: url(../../../../../public/img/homeWarnTop.png)
    100% no-repeat;
  background-size: 100% 100%;
  float: left;

}
.todotitleTopMoreImg{
	width: 22px;
  height: 22px;
  background: url(../../../../../public/img/homeTodoTopMore.png)
    100% no-repeat;
  background-size: 100% 100%;
  float: left;
}
.todotitleTopMoretitle{
	width: 33px;
  height: 16px;
  overflow-wrap: break-word;
  color: rgba(1, 123, 207, 1);
  font-size: 16px;
  font-family: 'Microsoft YaHei', '微软雅黑', sans-serif;
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
  margin: 3px 0 0 8px;
}
@media (min-width: 1200px) and (max-width: 1600px){
	.todolistTop-headRightBox{
		right:0;
	}
}

.noticetitleTopMoreImg{
	width: 4px;
  height: 14px;
  background: url(../../../../../public/img/homeNoticeTopMore.png)
    100% no-repeat;
  background-size: 100% 100%;
  margin-left: 5px;
  float: left;
}
.noticetitleTopMoretitle{
	width: 80px;
  height: 16px;
  overflow-wrap: break-word;
  color: rgba(1, 123, 207, 1);
  font-size: 14px;
  font-family: 'Microsoft YaHei', '微软雅黑', sans-serif;
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
  float: left;
  margin-left: 15px;
}
.todo-box{
	width: 100%;
}

.quickCenterCol {

border-radius: 6px;
height: 30px;
width: 56px;
margin: auto;
margin-top: 7px;
}
.quickCenterCol .clocount{
	display: block;
margin: auto;
overflow-wrap: break-word;
font-size: 18px;
font-weight: 600;
text-align: center;
white-space: nowrap;
}


.colimglable {

display: block;
overflow-wrap: break-word;
color: rgb(45, 55, 72);
font-size: 14px;
font-weight: NaN;
text-align: center;
white-space: nowrap;
margin:3px 0 12px;
}

.Quick-Row0{
	padding: 10px;
	padding-bottom:0px;
	padding-top: 2.9px;

}
.Quick-Row1{

	padding: 10px;
	padding-top:0px;
}

.Quick-Row0 .Quick-RowCol0{
	border-top: 1px #e9e6e6 solid;
	border-left: 1px #e9e6e6 solid;
	border-right: 1px #e9e6e6 solid;
	border-bottom: 1px #e9e6e6 solid;
}
.Quick-Row0 .Quick-RowCol1{
	border-top: 1px #e9e6e6 solid;
	border-right: 1px #e9e6e6 solid;
	border-bottom: 1px #e9e6e6 solid;
}
.Quick-Row0 .Quick-RowCol2{
	border-top: 1px #e9e6e6 solid;
	border-right: 1px #e9e6e6 solid;
	border-bottom: 1px #e9e6e6 solid;
}


.Quick-Row1 .Quick-RowCol0{
	border-left: 1px #e9e6e6 solid;
	border-right: 1px #e9e6e6 solid;
	border-bottom: 1px #e9e6e6 solid;
}
.Quick-Row1 .Quick-RowCol1{
	border-right: 1px #e9e6e6 solid;
	border-bottom: 1px #e9e6e6 solid;
}
.Quick-Row1 .Quick-RowCol2{
	border-right: 1px #e9e6e6 solid;
	border-bottom: 1px #e9e6e6 solid;
}

.Quick-itmeRow{
	border: 1px transparent solid;
	margin: auto;
	border-radius: 7px;
	width: 80px;
	height: 70px;
	cursor: pointer;

}
.Quick-itmeRow:hover{
	border: 1px solid #427CFF;
}
.clocount00{
	color: #5002ff;
}
.clocount01{
	color: #3528fd;
}
.clocount02{
	color: #0244d6;
}
.clocount10{
	color: #e64802;
}
.clocount11{
	color: #9301e1;
}
.clocount12{
	color: #9301e1;
}

@media (min-width: 1690px) and (max-width: 1999px){
	.todotitle{
		font-size: 14px;
		width: 70px;
	}
	.todotitleMore{
		font-size: 16px;
	}
	.clocount{
		font-size: 28px;
	}
	.colimglable{
		font-size: 16px;
	}
	.Quick-itmeRow{
		width: 90px;
		height: 80px;
	}
}
</style>
